<template>
    <div>
        <div class="list-title">
            <span class="list-title-title">第四部分：单效统计</span>
            <!--<span class="list-title-des">（ 说明：3.0统计 ）</span>-->
        </div>
        <el-row class="table-data">
            <el-row class="table-data">
                <el-col :span="24" class="table-list">
                    <el-col :span="8" class="table-list-lie"><span>上班司机</span></el-col>
                    <el-col :span="8" class="table-list-lie"><span>运单量</span></el-col>
                    <el-col :span="8" class="table-list-lie"><span>单效</span></el-col>
                </el-col>
                <el-col :span="24" class="table-list">
                    <el-col :span="8" class="table-list-lie"><span class="fontsize16">
                        <el-input type="number" placeholder="输入司机数量" v-model="driverNum" ></el-input>
                    </span></el-col>
                    <el-col :span="8" class="table-list-lie"><span class="fontsize16">{{todayData}}</span></el-col>
                    <el-col :span="8" class="table-list-lie"><span class="fontsize16">{{singleEffect}}</span></el-col>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import chartTransversePie from '../../../../components/chart/Pie';

    export default {
        name: "orderStatistics",
        props: {
            todayData:{
                type: Number | String
            },
            driverShangNum:{
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                driverNum: null
            }
        },
        computed: {
            singleEffect: function (val) {
                if (!this.driverNum) {
                    return 0
                } else {
                    return Number(this.todayData) / Number(this.driverNum)
                }
            }
        },
        watch: {
            driverShangNum:function(val) {
                console.info('bbian',val);
                this.driverNum = val;
            }
        },
        mounted() {
        },
        methods: {},
        components: {
            chartTransversePie
        }
    }
</script>
<style lang="less">
    .table-data{
        .el-input{
            .el-input__inner{
                text-align: center;
                border: none;
            }
        }

    }
</style>
<style scoped lang="less">
    .list-title {
        margin: 41px 0 33px 0;
        .list-title-title {
            margin-left: 173px;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.87);
        }
        .list-title-des {
            margin-left: 49px;
            font-size: 14px;
            color: rgba(255, 0, 0, 0.87);
        }
    }
    .table-data{
        text-align: center;
        border:1px solid rgba(0,0,0,0.12);
        border-right:none;
        .fontsize16{
            font-size: 16px;
        }
        .table-list{
            .table-list-lie{
                height: 52px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                /*padding: 7px 30px;*/
                border-right:1px solid rgba(0,0,0,0.12);
            }
        }
        .table-list:nth-of-type(1){
            display: flex;
            color:rgba(0,0,0,0.54);
            font-size:18px;
        }
        .table-list:nth-of-type(2n-1){
            background-color: rgba(0,0,0,0.12);
        }
    }
</style>
